<template>
  <div>
      <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" class="form">
          <a-row type="flex">
              <a-col flex="1 1 150px">
                  <a-row>
                      <a-col :span="10">
                            <a-form-item label="姓名" name="name">
                                <a-input v-model:value="formState.name" placeholder="请输入姓名"/>
                            </a-form-item>
                      </a-col>
                      <a-col :span="10">
                          <a-form-item label="学号" name="studentId">
                                <a-input v-model:value="formState.studentId" placeholder="请输入学号"/>
                            </a-form-item>
                      </a-col>
                  </a-row>
                   <a-row v-if="isShow">
                      <a-col :span="10">
                            <a-form-item label="班级" name="className">
                                <a-input v-model:value="formState.className" placeholder="请输入班级"/>
                            </a-form-item>
                      </a-col>
                      <a-col :span="10">
                            <a-form-item label="性别" class="sex" name="sex">
                                <a-select v-model:value="formState.sex" placeholder="please select your sex">
                                    <a-select-option value="true">男</a-select-option>
                                    <a-select-option value="false">女</a-select-option>
                                </a-select>
                            </a-form-item>
                      </a-col>
                  </a-row>
              </a-col>
              <a-col flex="0 1 350px" class="btngroup">
                    <a-form-item :wrapper-col="{ span: 16, offset: 4 }">
                        <a-button type="primary" @click="queryStudentByCondition">查询</a-button>
                        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
                        <a-button style="margin-left: 5px" class="btn" @click="isShow = !isShow">
                            <span v-if="!isShow">展开<DownOutlined/></span>
                            <span v-else>收起<UpOutlined/></span>
                        </a-button>
                    </a-form-item>
              </a-col>
          </a-row>  
      </a-form>
  </div>
</template>

<script>
import {Form, Button, Input, Select, Row, Col} from 'ant-design-vue';
import {DownOutlined,UpOutlined} from '@ant-design/icons-vue'
import {defineComponent, reactive,toRefs , toRaw , UnwrapRef,inject,ref} from 'vue';
import axios from 'axios';

export default defineComponent({
    components:{
        DownOutlined,
        UpOutlined
    },
    setup(){
        //父子通信
        const changeStudentList = inject("changeStudentList");
        const formRef = ref();
        let formState = reactive({
            name:'',
            studentId:'',
            className:'',
            sex:''
        })
        const state = reactive({
            labelCol:{span:6},
            wrapperCol:{span:16},
            isShow:false //控制班级和性别的显示和隐藏
        })
        const queryStudentByCondition = async () => {
            const res = await axios.get("/api/students/getStudentList",{
                params:{
                    current:1,
                    pageSize:10,
                    name:formState.name,
                    studentId:formState.studentId,
                    className:formState.className,
                    sex:formState.sex
                }
            })  
            console.log(res.data.total);
            changeStudentList(res.data.data,res.data.total);
        }

        const resetForm = () => {
            console.log(formRef.value.resetFields());
            formRef.value.resetFields();
        }

        return {
            ...toRefs(state),
            formState,
            queryStudentByCondition,
            formRef ,
            resetForm
        }
    }
})
</script>

<style lang="less" scoped>
.btn{
    border: none;
    color:#00f;
    font-size: 12px;
}
</style>